<label class="layui-hide">

    <!-- 视频上传支持组件 开始 -->
    <input class="layui-input" name="video-upload-input">
    <button class="layui-btn layui-btn-sm" type="button" data-file data-type="mp4" data-field="video-upload-input">上传视频文件</button>
    <!-- 视频上传支持组件 结束 -->

    <!-- 图片上传支持组件 开始 -->
    <input class="layui-input" name="image-upload-input">
    <button class="layui-btn layui-btn-sm" type="button" data-file="image" data-type="gif,png,jpg,jpeg" data-field="image-upload-input">上传图片文件</button>
    <!-- 图片上传支持组件 结束 -->

    <!-- 编辑时的默认数据 开始 -->
    <textarea class="layui-textarea" id="DefaultStyle">{$vo.styles|default=0|json_encode}</textarea>
    <textarea class="layui-textarea" id="DefaultItems">{$vo.content|default=[]|json_encode}</textarea>
    <!-- 编辑时的默认数据 结束 -->

</label>

<script>
    require(['vue', 'vue.sortable'], function (Vue, Sortable, app) {
        Vue.component('vuedraggable', Sortable)
        app = new Vue({
            el: '#TemplateApp',
            components: {draggable: Sortable},
            data: {
                idx: 0,
                item: {},
                defas: [],
                tools: [],
                items: [],
                name: '{$vo.name|default="模板名称"}',
                styles: {
                    mainTextColor: 'rgba(0,0,0,1)',
                    mainBackColor: 'rgba(100,200,300,1)',
                },
            },
            created: function () {
                this.tools = [
                    {
                        name: '基础组件', data: [
                            {name: '图片', active: true, icon: 'layui-icon layui-icon-picture'},
                            {name: '轮播图', active: true, icon: 'layui-icon layui-icon-carousel'},
                            {name: '二维码', active: true, icon: 'iconfont iconfont-qrcode'},
                            {name: '图文说明', active: true, icon: 'layui-icon layui-icon-tabs'},
                            {name: '文本', active: true, icon: 'layui-icon layui-icon-read'},
                            {name: '视频', active: true, icon: 'layui-icon layui-icon-video'},
                        ]
                    }, {
                        name: '核心组件', data: [
                            {name: '防伪信息', active: true, icon: 'layui-icon layui-icon-code-circle'},
                            {name: '标签序号', active: true, icon: 'layui-icon layui-icon-templeate-1'},
                            {name: '通用溯源', active: true, icon: 'layui-icon layui-icon-carousel'},
                            {name: '产品信息', active: true, icon: 'layui-icon layui-icon-diamond'},
                            {name: '代理信息', active: true, icon: 'layui-icon layui-icon-slider'},
                            {name: '区块链溯源', active: true, icon: 'layui-icon layui-icon-transfer'},
                        ]
                    }, {
                        name: '辅助组件', data: [
                            {name: '表格', title: '参数表', active: true, icon: 'layui-icon layui-icon-set-sm'},
                            {name: '按钮', active: true, icon: 'layui-icon layui-icon-prev-circle'},
                            {name: '分割线', active: true, icon: 'layui-icon layui-icon-engine'},
                            {name: '元宇宙', active: false, icon: 'layui-icon layui-icon-test'},
                            /* {if auth('plugin/live.camera/index')} */
                            // {name: '云监控', active: true, icon: 'layui-icon layui-icon-carousel'},
                            /* {else} */
                            // {name: '云监控', active: false, icon: 'layui-icon layui-icon-carousel'},
                            /* {/if} */
                            // {name: 'VR链接', active: true, icon: 'layui-icon layui-icon-carousel'},
                            // {name: '直播链接', active: true, icon: 'layui-icon layui-icon-carousel'},
                        ]
                    }
                ];
                this.defas = [
                    {name: '分割线', width: 10, type: 'solid', color: 'rgba(0,0,0,0.3)'},
                    {
                        name: '图片', type: 1, data: [
                            {image: '__FULL__/admin/ups/00.jpg', link: ''},
                        ]
                    },
                    {name: '云监控', title: '监控标题', remark: '', deviceid: '', devicename: '请选择直播设备'},
                    {name: '二维码', image: '__FULL__/admin/img/qrc.png', content: '扫码关注众号获取更多产品信息'},
                    {name: '轮播图', items: [{image: '__FULL__/admin/ups/slider.jpg', link: ''}]},
                    {name: '防伪信息', title: "防伪信息", audio: true, verify: false, count: 1, error: '您好，您所查询的防伪码已经被查询超过 1 次，已失效，谨防假冒！', success: '您所查询的产品为正品，请放心使用！'},
                    {name: '标签序号', title: "标签序号"},
                    {name: '物流信息', title: '物流信息'},
                    {name: '文本', content: '请输入文本内容'},
                    {name: '视频', title: '视频标题', src: ''},
                    {name: '芯媒体', title: '芯媒体', image: '__FULL__/admin/ups/slider.jpg', verify: false},
                    {name: '产品信息', title: '产品信息'},
                    {name: '代理信息', title: '代理信息'},
                    {name: '区块链溯源', title: '区块链溯源', code: ''},
                    {
                        name: '通用溯源', data: {
                            title: '通用溯源', list: [
                                {title: '标题1', content: '通用溯源内容1', fileType: 'null', fileImage: '', fileVideo: ''},
                                {title: '标题2', content: '通用溯源内容2', fileType: 'null', fileImage: '', fileVideo: ''}
                            ]
                        }
                    },
                    {
                        name: '表格', type: 2, title: '产品详情', data: [
                            {title: '价格', type: '人民币', content: '内容哈'},
                            {title: '价格', type: '人民币', content: '内容哈'}
                        ]
                    },
                    {
                        name: '按钮', type: 2, title: '购买地址', data: [
                            {title: '淘宝', img: '__FULL__/admin/img/taobao.jpg', link: ''},
                            {title: '天猫', img: "__FULL__/admin/img/tianmao.jpg", link: ''},
                            {title: '京东', img: "__FULL__/admin/img/jingdong.jpg", link: ''},
                            {title: '拼多多', img: "__FULL__/admin/img/pinduo.jpg", link: ''}
                        ]
                    },
                    {
                        name: '图文说明', data: {
                            title: '图文说明', list: [
                                {title: '标题1', content: '图文内容1', fileType: 'null', fileImage: '', fileVideo: ''},
                                {title: '标题2', content: '图文内容1', fileType: 'null', fileImage: '', fileVideo: ''},
                            ]
                        }
                    },
                ];
                this.items = JSON.parse(document.getElementById('DefaultItems').value || '[]');
            },
            mounted: function () {
                this.itemEd(0);
                var that = this;
                // 动态初始化颜色背景
                var styles = JSON.parse($('#DefaultStyle').val()) || {};
                for (var i in this.styles) if (styles[i]) this.styles[i] = styles[i];
                ['mainBackColor', 'mainTextColor'].forEach(function (name) {
                    layui.colorpicker.render({
                        size: 'lg', alpha: true, format: 'rgb', predefine: true,
                        elem: '#' + name, color: that.styles[name], change: function (color) {
                            that.styles[name] = color;
                        }
                    });
                });
            },
            methods: {
                copy: function (data) {
                    return JSON.parse(JSON.stringify(data));
                },
                // 设置直接设备
                setCamera: function () {
                    $.form.modal('{:url("plugin/live.camera/select")}', {}, '选择直播设备');
                    window.setItem = function (id, name) {
                        if (app.item.name === '云监控') {
                            app.item.deviceid = id;
                            app.item.devicename = name;
                        }
                    };
                },
                // 设置图片类型
                setImgType: function (type) {
                    if (this.item.type === type) return;
                    this.item.type = type;
                    if (type === 1) {
                        this.item.data[0] = {image: '__FULL__/admin/ups/00.jpg', link: ''};
                    }
                    if (type === 2) {
                        this.item.data[0] = {image: '__FULL__/admin/ups/01.jpg', link: ''};
                        this.item.data[1] = {image: '__FULL__/admin/ups/01.jpg', link: ''};
                    }
                    if (type === 3) {
                        this.item.data[0] = {image: '__FULL__/admin/ups/02.jpg', link: ''};
                        this.item.data[1] = {image: '__FULL__/admin/ups/01.jpg', link: ''};
                        this.item.data[2] = {image: '__FULL__/admin/ups/01.jpg', link: ''};
                    }
                    if (type === 4) {
                        this.item.data[0] = {image: '__FULL__/admin/ups/01.jpg', link: ''};
                        this.item.data[1] = {image: '__FULL__/admin/ups/01.jpg', link: ''};
                        this.item.data[2] = {image: '__FULL__/admin/ups/01.jpg', link: ''};
                        this.item.data[3] = {image: '__FULL__/admin/ups/01.jpg', link: ''};
                    }
                },
                addItem: function (name) {
                    this.defas.forEach(function (item) {
                        if (item.name === name) app.items.splice(app.idx + 1, 0, app.copy(item));
                    });
                    this.itemEd(this.items.length > 1 ? this.idx + 1 : 0);
                    this.$nextTick(function () {
                        var box = this.$el.querySelector('div.mobile-body');
                        var current = this.$el.querySelector('[sv-element].active');
                        box.scrollTo({top: current.offsetTop, behavior: 'smooth'});
                    }, 500);
                },
                itemEd: function (index) {
                    this.validate = $('#TemplateApp').data('validate');
                    if (this.validate && !this.validate.checkAllInput()) {
                        return false;
                    }
                    this.idx = index, this.item = this.items[index] || {};
                    // 初始化颜色选择器
                    if (this.item.hasOwnProperty('color')) setTimeout(function () {
                        layui.colorpicker.render({
                            size: 'lg', alpha: true, format: 'rgb', predefine: true,
                            elem: '#MyLineColorPicker', color: app.item.color,
                            change: function (color) {
                                app.item.color = color;
                            }
                        });
                    }, 100);
                },
                mainStyle: function () {
                    return {color: this.styles.mainTextColor, backgroundColor: this.styles.mainBackColor};
                },
                // 视频上传事件处理
                uploadVideo: function (object, field, type) {
                    var that = this;
                    $('[data-field="video-upload-input"]').click();
                    $('[name="video-upload-input"]').one('change', function (e) {
                        if (type === 'push') {
                            var data = {};
                            data[field] = e.currentTarget.value;
                            object.push(data);
                        } else {
                            object[field] = e.currentTarget.value;
                        }
                        that.$forceUpdate()
                    });
                },
                uploadImage: function (object, field, type) {
                    var that = this;
                    $('button[data-field="image-upload-input"]').click();
                    $('input[name="image-upload-input"]').one('change', function (e) {
                        if (type === 'push') {
                            var data = {};
                            data[field] = e.currentTarget.value;
                            object.push(data);
                        } else {
                            object[field] = e.currentTarget.value;
                        }
                        that.$forceUpdate();
                    });
                },
                itemRm: function (items, index) {
                    if (this.item === items[index]) {
                        if (index > 0) this.item = items[index - 1];
                        else if (index < items.length - 1) this.item = items[index + 1];
                        else this.item = {};
                    }
                    items.splice(index, 1);
                },
                moveUp: function (items, index) {
                    if (index > 0) (function (item) {
                        items.splice(index - 1, 1), items.splice(index, 0, item);
                    })(items[index - 1]);
                },
                moveDn: function (items, index) {
                    if (index + 1 < items.length) (function (item) {
                        items.splice(index + 1, 1), items.splice(index, 0, item);
                    })(items[index + 1]);
                },
                moveRm: function (items, index) {
                    items.splice(index, 1);
                }
            }
        });
    });
</script>